<template>
	<view class="my-box" style="min-height: 100vh;background: #f8f8f8;;">
		<image class="bj-img" src="../../static/user_top_bg@2x.png" mode="widthFix"></image>
		<view class="top-box">
			<view class="top-header" :style="{paddingTop:topXp+'px'}">
				<view class="top-nav-box">
					<view class="top-nav-box-left" :style="{height:headerHight+'px'}" @click="gotoIndex">
						<u-icon name="arrow-left" color="#333" size="24"></u-icon>
					</view>
					<view class="top-nav-box-right" :style="{top:headerHight+10+'px'}" v-if="user_id">
						<u-icon class="setting-icon" name="setting" color="#333" size="24" @click="gotoSet"></u-icon>
					</view>
				</view>
				<view class="top-header-content">
					<view class="top-left-content">
						<image v-if="userData.img" class="user-logo" :src="userData.img" mode=""></image>
						<view class="user-logo" v-if="!userData.img">
							<image src="../../static/my_icon_head@2x.png" class="moren-logo" mode=""></image>
						</view>
						<view class="user-news" v-if="user_id">
							<view class="news-p">{{userData.nickname}}</view>
							<view class="nengliang-p" @click="gotoPower">
								<image style="width: 12px;" src="../../static/my_icon_power@2x.png" mode="widthFix"></image>
								<view class="nengliang-num">能量:</view>
								<view style="font-size: 12px;">{{userData.point}}</view>
								<u-icon name="arrow-right" color="#333" size="14"></u-icon>
							</view>
						</view>
						<view class="go-login" @click="gotoLogin" v-else> 
							<view class="news-p">去登录</view>
							<u-icon name="arrow-right" color="#333" size="20"></u-icon>
						</view>
					</view>
					<view class="top-right-content" v-if="user_id" >
						<view class="powter-btn" @click="gotoPower">
							获取能量
						</view>
					</view>
				</view>
				<view class="signature-text">{{userData.introduction ? userData.introduction : '没个性，不签名'}}</view>
				<view class="top-header-bottom">
					<view class="top-header-bottom-item" @click="gotoGz('gz')">
						<view style="color: #333;font-size: 16px;">{{userData.follow ? userData.follow : '0'}}</view>
						<view>关注</view>
					</view>
					<view class="top-header-bottom-item" @click="gotoGz('fs')">
						<view  style="color: #333;font-size: 16px;">{{userData.fans ? userData.fans : '0'}}</view>
						<view>粉丝</view>
					</view>
					<view class="top-header-bottom-item" @click="gotoGz('dz')">
						<view  style="color: #333;font-size: 16px;">{{userData.likes ? userData.likes : '0'}}</view>
						<view>获赞</view>
					</view>
				</view>
			</view>
			<view class="content-my">
				<view class="center-header-center">
					<view :class="['center-header-item', tabIndex == item.id ? 'center-header-ative' : '' ]" v-for='item in HeadersData' :key="item" @click.stop="ativeItem(item)">
						{{item.name}}
					</view>
				</view>
				<view class="community-list">
					<view class="community-list-left">
						<view class="community-list-item" v-for="(item,index) in contentList" :key="item" v-if="index%2 == 0" @click="gotoDetails(item)">
							<view class="content-img-box">
								<image class="content-img" :src="item.image" mode=""></image>
								<view class="content-tip" v-if="item.auditing_text == '审核中'">{{item.auditing_text}}</view>
								<view class="content-tip-error" v-if="item.auditing_text == '审核失败'">{{item.auditing_text}}</view>
							</view>
							<view class="content-item-bottom">
								<view class="content-item-bottom-title">{{item.title}}</view>
								<view class="content-item-bottom-content">
									<view class="content-item-bottom-content-left">
										<image class="user-logo-bottom" :src="item.user.img" ></image>
										<view class="name-p">{{item.user.nickname}}</view>
									</view>
									<view class="content-item-bottom-content-right">
										<view class="content-item-bottom-content-right-item">
											<u-icon name="heart-fill" color="#CACACA" size="16"></u-icon>
											<p>{{item.likes}}</p>
										</view>
										<!-- <view class="content-item-bottom-content-right-item">
											<image style="width: 16px;height: 16px;" src="../../static/community_icon_send@2x.png" mode=""></image>
											<p>{{item.share}}</p>
										</view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="community-list-right" >
						<view class="community-list-item" v-for="(item,index) in contentList"  :key="item" v-if="index%2 == 1" @click="gotoDetails(item)">
							<view class="community-list-item">
								<view class="content-img-box">
									<image class="content-img" :src="item.image" mode=""></image>
									<view class="content-tip" v-if="item.auditing_text == '审核中'">{{item.auditing_text}}</view>
									<view class="content-tip-error" v-if="item.auditing_text == '审核失败'">{{item.auditing_text}}</view>
								</view>
								<view class="content-item-bottom">
									<view class="content-item-bottom-title">{{item.title}}</view>
									<view class="content-item-bottom-content">
										<view class="content-item-bottom-content-left">
											<image class="user-logo-bottom" :src="item.user.img" ></image>
											<view class="name-p">{{item.user.nickname}}</view>
										</view>
										<view class="content-item-bottom-content-right">
											<view class="content-item-bottom-content-right-item">
												<u-icon name="heart-fill" color="#CACACA" size="16"></u-icon>
												<view>{{item.likes}}</view>
											</view>
											<!-- <view class="content-item-bottom-content-right-item">
												<image style="width: 16px;height: 16px;" src="../../static/community_icon_send@2x.png" mode=""></image>
												<p>{{item.share}}</p>
											</view> -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="none-list"  v-if="contentList.length == 0">~暂无信息~</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import { mapMutations } from 'vuex'
	
	export default{
		data(){
			return{
				topXp:null,
				headerHight:null,
				userData:{},
				HeadersData:[
					{id:0,name:'作品'},
					{id:1,name:'赞过'},
					{id:2,name:'助手'},
				],
				tabIndex:0,
				contentList:[],
				page:1,
				user_id:'',
			}
		},
		onLoad() {
			this.user_id = uni.getStorageSync('uid')
			this.userData = uni.getStorageSync('userNews')
			this.getTop()
			this.getList()
			this.getUserNewsFun()
		},
		onReachBottom(){
			this.page++
			if(this.tabIndex == 0){
				this.getList()
			}else if(this.tabIndex == 1){
				this.getLikeList()
			}else if(this.tabIndex == 2){
				
			}
		},
		methods:{
			...mapMutations(['SET_USERNEWS']),
			getUserNewsFun(){
				if(!this.user_id){
					return false
				}
				http.getUserNews({
					user_id:this.user_id
				}).then((ress)=>{
					let userNews = ress.data.result
					userNews.phone = this.userData.phone
					uni.setStorageSync('userNews',userNews)
					this.SET_USERNEWS(userNews)
					this.userData = userNews
				})
			},
			gotoLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			getList(id){
				if(!this.user_id){
					return false
				}
				uni.showLoading()
				http.getUserWorksList({
					limit:10,
					page:this.page,
					user_id:this.user_id
				}).then((res)=>{
					uni.hideLoading()
					if(res.data.code == 200){
						let data = res.data.result
						data.wid = data.id
						this.contentList = this.contentList.concat(data)
					}
				})
			},
			getLikeList(){
				if(!this.user_id){
					return false
				}
				uni.showLoading()
				http.getUserLikeBefor({
					limit:10,
					page:this.page,
					user_id:this.user_id
				}).then((res)=>{
					uni.hideLoading()
					if(res.data.code == 200){
						let data = res.data.result
						data.forEach((item)=>{
							if(item.work){
								item.image = item.work.image
								item.likes = item.work.likes
								item.title = item.work.title
								item.wid = item.work.id
								item.user = item.work.user
							}
						})
						
						this.contentList = this.contentList.concat(data)
					}
				})
			},
			getTop(){
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.topXp =  menuButtonInfo.top
				this.headerHight = menuButtonInfo.height
			},
			ativeItem(item){
				this.tabIndex = item.id
				this.contentList = []
				this.page = 1
				if(this.tabIndex == 0){
					this.getList()
				}else if(this.tabIndex == 1){
					this.getLikeList()
				}else if(this.tabIndex == 2){
					
				}
			},
			gotoDetails(item){
				uni.navigateTo({
					url:"/pages/work/workDetails?wid="+item.id
				})
			},
			gotoIndex(){
				uni.redirectTo({
					url:'/pages/index/index'
				})
			},
			gotoSet(){
				uni.navigateTo({
					url:'/pages/setting/setting'
				})
			},
			gotoPower(){
				uni.navigateTo({
					url:'/pages/power/index'
				})
			},
			gotoGz(item){
				uni.navigateTo({
					url:'/pages/follow/index?name='+item
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-box{
		width: 100%;
		min-height: 100vh;
		background: $bg-color;
		position: relative;
		.bj-img{
			position: absolute;
			z-index: 1;
			left: 0;
			top: 0;
			width: 100%;
		}
		.top-box{
			width: 100%;
			position: absolute;
			z-index: 2;
			box-sizing: border-box;
			padding:0 11px;
			.top-header{
				width: 100%;
				box-sizing: border-box;
				padding: 0 11px 11px 11px;
				.top-nav-box{
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					position: relative;
					.top-nav-box-left{
						display: flex;
					}
					.top-nav-box-right{
						position: absolute;
						right: 0;
						z-index: 10;
					}
				}
				.top-header-content{
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					box-sizing: border-box;
					padding-top: 28px;
					.top-left-content{
						display: flex;
						flex-direction: row;
						.user-logo{
							width: 60px;
							height: 60px;
							border-radius: 50%;
							overflow: hidden;
							.moren-logo{
								width: 100%;
								height: 100%;
							}
						}
						.user-news{
							margin-left: 15px;
							display: flex;
							flex-direction: column;
							justify-content: center;
							.news-p{
								font-size: 18px;
								color: #333;
								font-weight: bold;
							}
							.nengliang-p{
								display: flex;
								flex-direction: row;
								align-items: center;
								color: #333;
								font-size: 12px;
								margin-top: 15px;
								.nengliang-num{
									display: block;
									margin-right: 10px;
									margin-left: 5px;
								}
							}
						}
						.go-login{
							margin-left: 15px;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							.news-p{
								font-size: 20px;
								color: #333;
								font-weight: bold;
							}
						}
					}
					.top-right-content{
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
						.powter-btn{
							width: 90px;
							border-radius: 5px;
							background: $main-color;
							text-align: center;
							line-height: 30px;
							height: 30px;
							font-size: 14px;
							color: #fff;
						}
					}
				}
				.signature-text{
					width: 100%;
					font-size: 12px;
					color: #999;
					box-sizing: border-box;
					margin-top: 7px;
				}
				.top-header-bottom{
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					margin-top: 18px;
					.top-header-bottom-item{
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 12px;
						color: #999;
						line-height: 25px;
						margin-right: 35px;
					}
				}
			}
			.content-my{
				.center-header-center{
					width: 100%;
					display: flex;
					flex-direction: row;
					background-image: url('https://ai.ytslgz.cn/static/xcx/circular_angle_bg.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					margin-top: 18px;
					.center-header-item{
						flex: 1;
						height: 50px;
						line-height: 50px;
						font-size: 16px;
						color: #999;
						text-align: center;
						position: relative;
					}
					.center-header-item:nth-child(1){
						margin-left: 0px;
					}
					.center-header-ative{
						font-weight: bold;
						color: #000 !important;
					}
					.center-header-ative::before{
						content: '';
						width: 30%;
						height: 3px;
						border-radius: 2px;
						background: $main-color;
						position: absolute;
						bottom: -2px;
						left: 35%;
					}
				}
				.community-list{
					width: 100%;
					box-sizing: border-box;
					display: flex;
					flex-direction: row;
					margin-top: 10px;
					.community-list-left{
						width: 100%;
						box-sizing: border-box;
						padding-left: 10px;
						padding-right: 5px;
					}
					.community-list-right{
						width: 100%;
						box-sizing: border-box;
						padding-right: 10px;
						padding-left: 5px;
					}
					.community-list-item{
						width: 100%;
						margin-bottom: 10px;
						border-radius: 15px;
						overflow: hidden;
						.content-img-box{
							width: 100%;
							height: 185px;
							position: relative;
							overflow: hidden;
							.content-img{
								width: 100%;
								height: 100%;
								display: block;
								margin: 0 auto;
							}
							.content-tip{
								padding: 5px 10px;
								position: absolute;
								top: 0;
								right: 0;
								background: rgba(0,0,0,0.5);
								color: #fff;
								font-size: 12px;
							}
							.content-tip-error{
								padding: 5px 10px;
								position: absolute;
								top: 0;
								right: 0;
								background: #F90A2D;
								color: #fff;
								font-size: 12px;
							}
						}
						.content-item-bottom{
							width: 100%;
							box-sizing: border-box;
							padding:10px 10px;
							background: #fff;
							border-top: 1px solid #f2f2f2;
							overflow: hidden;
							.content-item-bottom-title{
								font-size: 14px;
								color: #000;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								width: 100%;
								margin-bottom: 10px;
							}
							.content-item-bottom-content{
								width: 100%;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: space-between;
								font-size: 12px;
								.content-item-bottom-content-left{
									width: calc(100% - 70px);
									display: flex;
									flex-direction: row;
									align-items: center;
									.user-logo-bottom{
										width: 20px;
										height: 20px;
										border-radius: 50%;
										margin-right: 5px;
									}
									.name-p{
										width: calc(100% - 25px);
										overflow: hidden;
										text-overflow:ellipsis;
										white-space: nowrap;
									}
								}
								.content-item-bottom-content-right{
									width: 53px;
									max-width: 50%;
									display: flex;
									flex-direction: row;
									align-items: center;
									justify-content: flex-end;
									color: #999;
									.content-item-bottom-content-right-item{
										display: flex;
										flex-direction: row;
										align-items: center;
										margin-right: 5px;
									}
								}
							}
						}
					}
				}
				.none-list{
					width: 100%;
					font-size: 14px;
					height: 40px;
					text-align: center;
					line-height: 40px;
					color: #999;
				}
			}
		}
	}
</style>